<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        header{
            background-color: rgb(0, 143, 207);
            width: 100%;
            float: left;
            padding: 0px;
            margin: 0px;
        }
        header ul{
            padding:0px;
            margin: 0px;
            float: left;
            width: 100%;
        }
        body{
            float: left;
            width: 100%;
            padding:0px;
            margin: 0px;
        }
        header ul li{
            line-height: 49px;
            padding-right: 28px;
            margin: 0px;
            float: left;
            color:#fff;
        }
        header a{
            float: left;
            color: #fff;
            text-decoration: none;
            font-size: 13px;
        }
        .body{
            float: left;
            width: 100%;
        }
        .lefts{
            float: left;
            width: 20%;
        }
        .centres{
            float: left;
            width: 60%;
        }
        .rights{
            float: left;
            width: 20%;
        }
        #design_picture{
            margin: 0px auto;;
        }
    </style>
</head>
<body>

  <header>
      <ul>
          <li style="margin-left: 30px;"><a href="">开启设计</a></li>
          <li><a href="">模板中心</a></li>
          <li><a href="">模板专题</a></li>
          <li>|</li>
          <li><a href="">艺术二维码</a></li>
          <li><a href="">商户版</a></li>
          <li></li>
          <li></li>
          <li><a href="">登录</a><a href="javascript:void(0)">/</a><a href="">注册</a></li>
          <li></li>
      </ul>
  </header>
    <div class="body">
        <div class="lefts">
            <img src="" alt="">
        </div>
        <div class="centres">
            <div id="design">
                <div id="design_picture">

                </div>
            </div>
        </div>
        <div id="rights">3</div>
    </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

    document.getElementById("design").style.width=$(".centres").width()+"px";
    document.getElementById("design").style.height=($(window).height()-$("header").height())+"px";
    document.getElementById("design").style.background ="#eeeeee";
    document.getElementById("design").style.float ="left";
    var ImageWidth = 200;
    var ImageHeght =200;
    document.getElementById("design_picture").style.width=ImageWidth+"px";
    document.getElementById("design_picture").style.height=ImageHeght+"px";
    document.getElementById("design_picture").style.background ="#fff";
    document.getElementById("design_picture").style.float ="left";
    var width = $("#design").width() ;
    var height=$("#design").height() ;
    document.getElementById("design_picture").style.marginLeft = (width-ImageWidth)/2+"px";
    document.getElementById("design_picture").style.marginTop= (height-ImageHeght)/2+"px";

    var i =0;
    var j=0;
    var i1=0;
    var tops;
    var left;
    var ImageWidth;
    var ImageHeght;
    var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                left=(parseInt($("#design").width())-parseInt($("#design_picture").width()))/2;
                tops=(parseInt($("#design").height())-parseInt($("#design_picture").height()))/2;
                ImageWidth =$("#design_picture").width();
                ImageHeght=$("#design_picture").height();

                console.log($("#design_picture").width())
                console.log($("#design_picture").height())
                if(ImageWidth>600){
                    ImageWidth=600;
                }
                if(ImageWidth<600){
                    i+=0.1;
                    j+=0.1;
                    i1+=0.2;
                    i1+=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                if(ImageHeght>600){
                    ImageHeght=600;
                }
                if(ImageWidth<600) {
                    i+=0.1;
                    j+=0.1;
                    i1+=0.2;
                    i1+=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                document.getElementById("design_picture").style.marginLeft=left+"px";
                document.getElementById("design_picture").style.marginTop=tops+"px";
                document.getElementById("design_picture").style.marginRight=left+"px";
                document.getElementById("design_picture").style.marginBottom=tops+"px";
                document.getElementById("design_picture").style.width=ImageWidth+"px";
                document.getElementById("design_picture").style.height=ImageHeght+"px";

            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                left=(parseInt($("#design").width())-parseInt($("#design_picture").width()))/2;
                tops=(parseInt($("#design").height())-parseInt($("#design_picture").height()))/2;
                ImageWidth =$("#design_picture").width();
                ImageHeght=$("#design_picture").height();

                if(ImageWidth<220){
                    ImageWidth=200;
                }
                if(ImageWidth<220){
                    i-=0.1;
                    j-=0.1;
                    i1-=0.2;
                    i1-=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                if(ImageHeght<220){
                    ImageHeght=200;
                } if(ImageWidth>220){
                    i-=0.1;
                    j-=0.1;
                    i1-=0.2;
                    i1-=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                document.getElementById("design_picture").style.marginLeft=left+"px";
                document.getElementById("design_picture").style.marginTop=tops+"px";
                document.getElementById("design_picture").style.marginRight=left+"px";
                document.getElementById("design_picture").style.marginBottom=tops+"px";
                document.getElementById("design_picture").style.width=ImageWidth+"px";
                document.getElementById("design_picture").style.height=ImageHeght+"px";
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向上滚动时
                left=(parseInt($("#design").width())-parseInt($("#design_picture").width()))/2;
                tops=(parseInt($("#design").height())-parseInt($("#design_picture").height()))/2;
                ImageWidth =$("#design_picture").width();
                ImageHeght=$("#design_picture").height();

                if(ImageWidth>600){
                    ImageWidth=600;
                }
                if(ImageWidth<600){
                    i+=0.1;
                    j+=0.1;
                    i1+=0.2;
                    i1+=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                if(ImageHeght>600){
                    ImageHeght=600;
                }
                if(ImageWidth<600) {
                    i+=0.1;
                    j+=0.1;
                    i1+=0.2;
                    i1+=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                document.getElementById("design_picture").style.marginLeft=left+"px";
                document.getElementById("design_picture").style.marginTop=tops+"px";
                document.getElementById("design_picture").style.marginRight=left+"px";
                document.getElementById("design_picture").style.marginBottom=tops+"px";
                document.getElementById("design_picture").style.width=ImageWidth+"px";
                document.getElementById("design_picture").style.height=ImageHeght+"px";
            }
            if (e.detail< 0) { //当滑轮向下滚动时
                left=(parseInt($("#design").width())-parseInt($("#design_picture").width()))/2;
                tops=(parseInt($("#design").height())-parseInt($("#design_picture").height()))/2;
                ImageWidth =$("#design_picture").width();
                ImageHeght=$("#design_picture").height();
                if(ImageWidth<220){
                    ImageWidth=200;
                }
                if(ImageWidth<220){
                    i-=0.1;
                    j-=0.1;
                    i1-=0.2;
                    i1-=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                if(ImageHeght<220){
                    ImageHeght=200;
                } if(ImageWidth>220){
                    i-=0.1;
                    j-=0.1;
                    i1-=0.2;
                    i1-=0.2;
                    tops-=i;
                    left-=i;
                    ImageWidth+=i1;
                    ImageHeght+=i1;
                }
                document.getElementById("design_picture").style.marginLeft=left+"px";
                document.getElementById("design_picture").style.marginTop=tops+"px";
                document.getElementById("design_picture").style.marginRight=left+"px";
                document.getElementById("design_picture").style.marginBottom=tops+"px";
                document.getElementById("design_picture").style.width=ImageWidth+"px";
                document.getElementById("design_picture").style.height=ImageHeght+"px";
            }
        }
    }

    //给页面绑定滑轮滚动事件
    if (document.addEventListener) {//firefox
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    //滚动滑轮触发scrollFunc方法  //ie 谷歌
    window.onmousewheel = document.onmousewheel = scrollFunc;
</script>
</body>
</html>
